<template>
    <div class="registerBox">
            <div class="registerContainer">
                <div class="registerCont">
                     <Form ref="registerForm" :model="registerForm" :rules="ruleValidate" :label-width="114" label-position="left">
                        <FormItem label="企业联系人" prop="contactName">
                            <Input v-model.trim="registerForm.contactName" size="large" placeholder="请输入企业联系人姓名"></Input>
                        </FormItem>
                        <FormItem label="绑定手机号" prop="mobile">
                            <Input v-model.trim="registerForm.mobile" size="large" :maxlength="11" placeholder="输入11位手机号"></Input>
                        </FormItem>
                        <FormItem label="输入验证码" prop="captcha" class="captchaBox">
                          <Input v-model.trim="registerForm.captcha" size="large" placeholder="输入验证码" :maxlength="6" class="captchaInput"></Input>
                          <Button class="captcha" type="info" @click="getCaptcha" v-if="!sendState" :disabled="inputDisable">发送验证码</Button>
                          <Button class="captcha" type="info" @click="getCaptcha" disabled v-else>{{codeTime}}s后可重发</Button>
                        </FormItem>
                        <CommonPassword :password="registerForm.password" :passwordLabel="'设置登录密码'" @passwordChange="passwordChange"></CommonPassword>
                        <FormItem label="确认登录密码" prop="rePassword">
                            <Input v-model.trim="registerForm.rePassword" size="large" type="password" :maxlength="16" :minlength="6" placeholder="再次输入密码"></Input>
                        </FormItem>
                    </Form>
                </div>
        </div>
    </div>
</template>

<script>
    import CommonPassword from 'components/commons/password'; //密码输入框
    export default {
        components: {CommonPassword},
        props: {
            settleForm: {  
                type: Object
            }
        },
        data() {
            const validateMobile = (rule, value, callback) => {
                if(!this.$utils.RegexUtils('MOBILE',value)) {
                    console.log(value)
                    callback(new Error('请输入有效的手机号'));
                }else{
                    // 验证手机号是否存在
                    this.$ajax(this.$api.common.userCheck, {mobile: value}, (data)=> {
                        console.log(data.code);
                        if(data.code == 200){
                            callback(new Error('该账户已注册'));
                            this.inputDisable = true;
                        }else if(data.code == 404){
                            this.inputDisable = false;
                            callback();
                        }
                    }, (error)=> {
                        console.log(error);
                    })
                }
            };
            const validatePass = (rule, value, callback) => {
                if (!this.$utils.RegexUtils('ISPWD',value)) {
                    callback(new Error('请输入6~16位密码'));
                }
                callback();
            };
            const validateRePass = (rule, value, callback) => {
                if (value !== this.registerForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            const verifySMS = (rule, value, callback) => {
                if(!this.codeIsOver) {
                    this.$ajax(this.$api.common.verifyCode,{mobile: this.registerForm.mobile, code: this.registerForm.captcha}, (data) => {
                        console.log('data');
                        console.log(data);
                        //获取token-=-===============================
                        this.$store.commit('token',data.token)
                        callback();
                    }, (error)=> {
                        callback(new Error('验证码有误，请重输'));
                    })
                }else {
                    // callback(new Error('验证码已过期'));
                    callback()
                }
            };
            return {
                isLoading: false, //加载
                inputDisable: true, //輸入框是否可用
                codeTimeFun: '',
                registerForm: {
                    roadLicense: '', //道路许可证
                    mobile: '',      //联系人手机号码
                    password: '',    //密码
                    rePassword: '',  //确认密码
                    contactName: '',  //企业联系人
                    captcha: ''      //验证码
                },
                userForm: {  //注册提交的字段
                    roadLicense: '', //道路许可证
                    mobile: '',      //联系人手机号码
                    password: '',    //密码
                },
                sendState: false,    //发送验证码的状态
                codeTime: 60,    //验证码过期时间
                codeIsOver: '',  //验证码是否过期
                ruleValidate: {
                    contactName: [
                        { required: true, message: '请输入企业联系人姓名', trigger: 'blur'}
                    ],
                    mobile: [
                        { required: true, message: '请输入绑定手机号码',max: 11, trigger: 'blur' },
                        { validator: validateMobile, trigger: 'blur'}
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', max: 6, trigger: 'blur' },
                        { validator: verifySMS, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, min: 6, max: 16, message: '请设置6~16位登录密码，区分大小写', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    rePassword: [
                        { required: true, max: 16, message: '请确认密码', trigger: 'blur' },
                        { validator: validateRePass, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            validateFun() {  //提交表单验证进行下一步操作
                this.settleForm.mobile = this.registerForm.mobile;
                this.settleForm.password = this.registerForm.password;
                this.settleForm.contactName = this.registerForm.contactName;
                
                let hasError = 0;
                for(let k in this.ruleValidate){
                    this.$refs.registerForm.validateField(k, (tips) => {
                        if (tips) {
                            console.log(tips)
                            hasError++;
                        }
                    })
                }
                console.log(hasError)
                if(hasError == 0){
                    this.$emit('lintTo', 1,'register')
                }
            },
            passwordChange(val) {
                this.registerForm.password = val;
            },
            getCaptcha() {  //获取验证码
                let isDoing = true;
                this.$refs.registerForm.validateField('mobile', (tip) => {  //手机号为空或者没填不执行发送验证码操作
                   console.log(tip);
                   if(tip){
                      isDoing = false;
                   }
                });
                if(isDoing){
                   this.inputDisable = true;
                   this.$ajax(this.$api.common.sendCode,{mobile: this.registerForm.mobile}, (data) => {
                        console.log(data)
                        if(data.code == 200){
                            this.sendState = true;
                            this.setCodeTimeFun();
                        }
                    }, (error)=> {
                        this.$Message.error('验证码发送失败，请稍后再试');
                        console.log(data);
                    })
                }
            },
            setCodeTimeFun(){  //开始倒计时
                this.codeTimeFun = setInterval(this.backwardCodeTime,1000);
                this.codeTime = 60;
            },
            backwardCodeTime(){  //发送验证码之后倒计时
                if(this.codeTime>0) this.codeTime--;
                else{
                    clearInterval(this.codeTimeFun);
                    this.sendState = false;
                }
            }
        }
    };
</script>
<style lang="less" rel="stylesheet/less">
.registerBox {
    font-size: 14px;
    color: @color-Content;
    .registerContainer {
        width: 100%;
        .registerCont {
            width: 614px;
            margin: 30px auto 0;
            text-align: center;
            .ivu-form {
                .captchaBox {
                    .captchaInput.ivu-input-wrapper {
                        width: auto;
                    }
                    .captchaInput .ivu-input {
                        width: 360px;
                        margin-right: 5px;
                    }
                    .captcha {
                        width: 130px;
                        height: 40px;
                        border-radius: 4px;
                        font-size: 14px;
                    }
                    .ivu-alert.ivu-alert-with-icon {
                        position: absolute;
                        right: -162px;
                        top: 4px;
                        padding: 8px 18px 8px 38px;
                    }
                }
                .ivu-poptip {
                    display: block;
                    .ivu-poptip-rel {
                        width: 100%;
                    }
                }
            }
            .submitBtn {
                margin-top: 30px;
                text-align: center;
                .nextBtn {
                    width: 269px;
                    height: 48px;
                    font-size: 14px;
                }
            }
            .ivu-progress-show-info .ivu-progress-outer {
                padding-right: 0;
                margin-right: 0
            }
        }
    }
}
</style>
